<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Mine</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
		<link rel="stylesheet" href="css/style.css" />
		 <link rel="stylesheet" type="text/css" href="./css/font.css"/>
	</head>
	<style type="text/css">
		.avatar {
			width: 70px;
			height: 70px;
			background-color: aliceblue;
			border-radius: 70px;
			overflow: hidden;
			margin-left: 25px;

		}

		.leve {
			background-image: url(img/ca48282c555d5bca181b87dcc4469cd3.png);
			background-size: 100%;
			width: 17px;
			height: 14px;
			text-align: 25px;

		}

		.leb {
			
			height: 25px;
			text-align: center;
			line-height: 20px;
			size: 5px;
			background-color: #2b58da;
			color: white;
			border-radius: 50px;
			padding: 2px;
			

		}

		.seting {
			background-image: url(img/m-01.png);
			width: 18px;
			height: 18px;
			background-size: 100%;
			margin-left: 25px;
			margin-top: 25px;
		}

		.s-header {
			padding-top: 15px;
			padding-bottom: 50px;
			background: url(img/bg.2f86eaa8.png) no-repeat;
			background-size: 100%;
		}

		.h-card {
			background-color: #d0e6fe;
			border-radius: 8px;
			margin-left: 25px;
			height: 89px;
			width: 85%;
			margin-top: 15px;
			
		
		}

		.centPage {
			height: 145px;
			border-radius: 8px;
			margin-left: 16px;
			margin-right: 16px;
			margin-top: 21px;
			background-image: linear-gradient(250deg, #4199f2, #2b57da);
		}
		.icon-one{
			background: url(img/m-02.png) no-repeat;
			background-size: 100%;
			width: 18px;
			height: 18px;
		}
		.cent{
			background-color: #f5f5f5;
			height: 800px;
		}
		.opList{
			margin-left: 15px;
			margin-right: 15px;
			border-radius: 12px;
			overflow: hidden;
			margin-bottom: 80px;
		}
		.opItem{
			height: 50px;
		 
		}
		.icon-team{
			background: url(img/m-03.png) no-repeat;
			background-size: 100%;
			width: 18px;
			height: 18px;
		}
		.icon-present{
			background: url(img/m-04.png) no-repeat;
			background-size: 100%;
			width: 18px;
			height: 18px;
		}
		.icon-recharge{
			background: url(img/m-05.png) no-repeat;
			background-size: 100%;
			width: 18px;
			height: 18px;
		}
		.icon-cash{
			background: url(img/m-06.png) no-repeat;
			background-size: 100%;
			width: 18px;
			height: 18px;
		}
			
	</style>
	<body>
		<div class="bui-page bui-box-vertical">
			<header>
				<!-- 固定顶部区 -->

			</header>
			<main >
				<!-- 固定中间滚动内容区 -->
				<div class="cent">
					<div class="s-header">
						<div class="bui-box-space example-box3 ">
							<div class="span3">
								<div class="avatar"><img src="" height="70"></div>
							</div>
							<div class="span5">
								<h1 style="color: black;margin-left: 5px;">7835842949</h1><br>
								<div class="bui-box" >
									<img src="img/ca48282c555d5bca181b87dcc4469cd3.png" width="14" height="14" style="margin-left: 5px;margin-top: 5px;">
									<div class="span1">
										<h6 class="leb" style="font-size: 10px;">Platinum member</h6>
									</div>
								</div>
					
							</div>
							<div class="span2"  style="text-align: center;">
								<div class="seting" id="seting"></div>
							</div>
						</div>
						<div class="bui-box-space h-card" style="color: #000000;">
							<div class="span1" style="text-align: center;  margin-top: 20px;">
								<h2 style="font-weight: 600;color: #000000;">870770</h2>
								<h3>total income</h3>
							</div>
							<div class="span1" style="text-align: center;  margin-top: 20px; ">
								<h2 style="font-weight: 600;color: #000000;">56630</h2>
								<h3>yesterday income</h3>
							</div>
						</div>
					
						<div class="centPage">
							<div class="bui-box-space example-box3">
								<div class="span1">
									<h1 class="" style="color: white;margin: 16px;">Team</h1>
								</div>
					
							</div>
							<div class="bui-box-space example-box3">
								<div class="span1" style="text-align: center;color: white;">
									<h1>1</h1>
									<h5>total number</h5>
								</div>
								<div class="span1" style="text-align: center;color: white;">
									<h1>0</h1>
									<h5>past income</h5>
								</div>
								<div class="span1" style="text-align: center;color: white;">
									<h1>0</h1>
									<h5>past income</h5>
								</div>
							</div>
						</div>
					
					</div>
					<div class="opList"  >
						<ul class="bui-list">
							<li class="bui-btn bui-box opItem" id="myDevice" style="">
								<div class="bui-icon " style="line-height: 25px;"><div class="icon-one"></div></div>
								<div class="span1">my device </div>
								<i class="icon-listright"></i>
							</li>
							<li class="bui-btn bui-box opItem"  id="myTeam ">
								<div class="bui-icon "  style="line-height: 25px;"><div class="icon-team"></div></div>
								<div class="span1">my team </div>
								<i class="icon-listright"></i>
							</li>
							<li class="bui-btn bui-box opItem"  id="myPresent">
								<div class="bui-icon "  style="line-height: 25px;"><div class="icon-present"></div></div>
								<div class="span1">my present </div>
								<i class="icon-listright"></i>
							</li>
							<li class="bui-btn bui-box opItem" id="recharge" >
								<div class="bui-icon "  style="line-height: 25px;"><div class="icon-recharge"></div></div>
								<div class="span1">recharge </div>
								<i class="icon-listright"></i>
							</li>
							<li class="bui-btn bui-box opItem" id="cash">
								<div class="bui-icon "  style="line-height: 25px;"><div class="icon-cash"></div></div>
								<div class="span1">cash </div>
								<i class="icon-listright"></i>
							</li>
						</ul>
					</div>
			
					
				</div>
		


			</main>
			<footer>
				<!-- 固定底部   -->
				<ul class="bui-nav">
					<li class="bui-btn bui-box-vertical " href="index.html">
						<!-- <span class="bui-badges"></span></i> -->
						<img src="img/t-01.png" width="30px" style="margin: 0 auto;">
						<div class="span1">home</div>
					</li>
					<li class="bui-btn bui-box-vertical " href="device.html">
						<img src="img/t-03.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Device</div>
					</li>
					<li class="bui-btn bui-box-vertical " href="wallet.html">
						<img src="img/t-05.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Wallet</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more " href="team.html">
						<img src="img/t-07.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Team</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more active" href="mine.html">
						<img src="img/t-10.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Mine</div>
					</li>
				</ul>
			</footer>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
		<script>
			bui.ready(function() {
				// 所有控件及方法需要在这里执行
				bui.btn({
					id: ".bui-page",
					handle: ".bui-btn"
				}).load();
				$("#seting").on("click", function(e) {
					bui.load({
						url: "./personalCenter.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#myDevice").on("click", function(e) {
					bui.load({
						url: "./myDevice.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#myTeam").on("click", function(e) {
					bui.load({
						url: "./team.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#myPresent").on("click", function(e) {
					bui.load({
						url: "./my_Present.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#recharge").on("click", function(e) {
					bui.load({
						url: "./rechargeCentre.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				$("#cash").on("click", function(e) {
					bui.load({
						url: "./Cash.html",
						param: {
							parameter: "parameter"
						}
					});
				})
				
				
			})
		</script>
	</body>
</html>
